<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="ext-4.0.0/resources/css/ext-all.css">
	<script type="text/javascript" src="ext-4.0.0/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="index.css" />
	<script type="text/javascript" src="../common/utilities.js"></script>
	<script type="text/javascript" src="../common/models.js"></script>
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
	<textarea id="template-update-testing">
		{id}, {surname}, <a href="#">link</a>
	</textarea>
	<textarea id="template-resume-document">
		<div class="sid-resume-document">
			<div class="header">
				<div class="prefix">
				</div>
				<h1>{givenName} {surname}</h1>
				<address>
					<div class="email">
						<a href="mailto:{emailAddress}?subject=R&eacute;sum&eacute;.">{emailAddress}</a>
					</div>
					<tpl for="telephoneNumber">
						<div class="interest phone">
							<span class="countryCode">{countryCode}</span>
							<span class="areaCode">{areaCode}</span>
							<span class="exchange">{exchange}</span>
							<span class="subscriber">{subscriber}</span>
						</div>
					</tpl>
					<tpl for="postalAddress">
						<div class="postal">
							<a href="http://maps.google.com/maps?q={street},+{city},+{state}">{street}
								<br/>
								{suite}
								<br/>
								{city}, {state} {code}
							</a>
						</div>
					</tpl>
				</address>
				<tpl for="pictures">
					<img class="profile" src="{location}"/>
				</tpl>
				<div class="suffix">
				</div>
			</div>
			<div class="body">
				<div class="objective">
					<div class="prefix">
					</div>
					<h2>Objective</h2>
					<div class="section">
						<p>
							{objective}
						</p>
					</div>
					<div class="suffix">
					</div>
				</div>
				<div class="skills">
					<div class="prefix">
					</div>
					<h2>Skills</h2>
					<tpl for="groupings.filter(function(grouping) { return grouping.section == 'skills'; })">
						<div class="section">
							<h3>{title}</h3>
							<p class="description">
								{description}
							</p>
							<ul>
								<tpl for="parent.skills.group(property, values)">
									<li><span class="interest interest-skill-{id}" name="skill-{id}">{[values.names.shortest()]}</span></li>
								</tpl>
							</ul>
						</div>
					</tpl>
					<div class="suffix">
					</div>
				</div>
				<div class="experience">
					<div class="prefix">
					</div>
					<h2>Experience</h2>
					<tpl for="experience">
						<div class="section">
							<span class="interest interest-experience-{id}" name="experience-{id}">
								<tpl for="employer">
									<h3>{name}</h3>
									<p class="description">
										{description}
									</p>
								</tpl>
								<dl>
									<dt class="title">Title</dt>
									<dd class="title">{title}</dd>
									<tpl for="beginning">
										<dt class="beginning">From</dt>
										<dd class="beginning date">{[values.month < 10 ? 0 : ""]}{month}/{year}</dd>
									</tpl>
									<dt class="ending">Until</dt>
									<tpl if="ending">
										<tpl for="ending">
											<dd class="ending date">{[values.month < 10 ? 0 : ""]}{month}/{year}</dd>
										</tpl>
									</tpl>
									<tpl if="!ending">
										<dd class="ending">present</dd>
									</tpl>
								</dl>
								<ul class="responsibilities">
									<tpl for="responsibilities">
										<li>{description}</li>
									</tpl>
								</ul>
							</span>
						</div>
					</tpl>
					<div class="suffix">
					</div>
				</div>
				<div class="education">
					<div class="prefix">
					</div>
					<h2>Education</h2>
					<tpl for="education">
						<div class="section">
							<tpl for="institution">
								<h3>{name}</h3>
							</tpl>
							<ul class="accomplishments">
								<tpl for="accomplishments">
									<li>{description}</li>
								</tpl>
							</ul>
						</div>
					</tpl>
					<div class="suffix">
					</div>
				</div>
				<div class="references">
					<div class="prefix">
					</div>
					<h2>References</h2>
					<tpl for="references">
						<div class="section">
							<h3>{givenName} {surname}</h3>
							<p class="description">
								{description}
							</p>
							<dl>
								<dt class="email">Email</dt>
								<dd class="email"><a href="mailto:{emailAddress}">{emailAddress}</a></dd>
								<dt class="phone">Phone</dt>
								<dd class="phone">
									<tpl for="telephoneNumber">
										<span class="countryCode">{countryCode}</span>
										<span class="areaCode">{areaCode}</span>
										<span class="exchange">{exchange}</span>
										<span class="subscriber">{subscriber}</span>
									</tpl>
								</dd>
							</dl>
						</div>
					</tpl>
					<div class="suffix">
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="prefix">
				</div>
				<span class="name">{givenName} {surname}</span>
				<address>
					<span class="email"><a href="mailto:{emailAddress}?subject=R&eacute;sum&eacute;.">{emailAddress}</a></span>
					<span class="phone">
						<tpl for="telephoneNumber">
							<span class="countryCode">{countryCode}</span>
							<span class="areaCode">{areaCode}</span>
							<span class="exchange">{exchange}</span>
							<span class="subscriber">{subscriber}</span>
						</tpl>
					</span>
					<span class="postal">
						<tpl for="postalAddress">
							<a href="http://maps.google.com/maps?q={street},+{city},+{state}">{street}, {suite}, {city}, {state} {code}</a>
						</tpl>
					</span>
				</address>
				<div class="suffix">
				</div>
			</div>
		</div>
	</textarea>
</body>
</html>
